<template>
	<view class="page-box">
		<swiper-image :list="images"></swiper-image>
		<view style="border: 1px solid #1BB768;background-color: white;height: 264rpx;display: flex;flex-direction: column;justify-content: space-between;padding: 30rpx;border-radius: 40rpx;margin: 30rpx;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="font-size: 36rpx;">标号：{{ info.goods_code }}</view>
				<view style="font-size: 28rpx;">{{ info.released_at }}</view>
			</view>
			<view style="display: flex;justify-content: space-between;font-size: 32rpx;">
				<view style="background-color: rgba(85, 85, 85, 0.52);color: white;border-radius: 36rpx;height: 56rpx;padding: 0 24rpx;display: flex;justify-content: center;align-items: center;">
					数量：{{ info.stock }}片
				</view>
				<view style="background-color: #88CABE;color: #097B5D;border-radius: 36rpx;height: 56rpx;padding: 0 24rpx;display: flex;justify-content: center;align-items: center;">
					重量：{{ info.weight }}kg
				</view>
			</view>
			<view style="display: flex;font-size: 36rpx;align-items: center;">
				<view>标品起投价：</view>
				<view style="color: #EC1111;font-size: 44rpx;">￥{{ info.label_price || '0.00' }}</view>
			</view>
		</view>
		<view style="background-color: white;padding: 30rpx;border-radius: 20rpx;display: flex;margin: 0 30rpx 30rpx;font-size: 36rpx;">
			<view style="flex-shrink: 0;">聚星字号：</view>
			<view>{{ info.goods_name }}</view>
		</view>
		<view style="background-color: white;padding: 30rpx;border-radius: 20rpx;display: flex;margin: 0 30rpx 30rpx;font-size: 36rpx;">
			<view style="flex-shrink: 0;">标品介绍：</view>
			<view>{{ info.description }}</view>
		</view>
		<view style="background-color: white;padding: 30rpx;border-radius: 20rpx;display: flex;margin: 0 30rpx 30rpx;font-size: 36rpx;">
			<view style="flex-shrink: 0;">备注信息：</view>
			<view>{{ info.remarks }}</view>
		</view>
		<view v-if="info && info.bid_goods && info.bid_goods.length > 0" style="position: relative;margin: 72rpx 30rpx 60rpx;border: 1px solid #1BB768;background-color: white;border-radius: 40rpx;padding: 80rpx 20rpx 40rpx;">
			<view style="position: absolute;width: 334rpx;height: 90rpx;top: -40rpx;left: 50%;transform: translateX(-50%);border-radius: 40rpx;background-color: #88CABE;color: white;line-height: 90rpx;text-align: center;">
				我的投标价格
			</view>
			<view style="background-color: #097B5D;height: 76rpx;font-size: bold;text-align: center;color: white;display: flex;justify-content: space-between;align-items: center;">
				<text style="width: 1%;flex-grow: 1;">投标时间</text>
				<text style="width: 1%;flex-grow: 1;">投标价格</text>
				<text style="width: 1%;flex-grow: 1;">投标次数</text>
			</view>
			<view v-for="(item, index) in info.bid_goods" :key="index" style="display: flex;justify-content: space-between;align-items: center;height: 120rpx;font-size: 32rpx;text-align: center;border-bottom: 1px solid #097B5D;">
				<text style="width: 1%;flex-grow: 1;">{{ item.created_at }}</text>
				<text style="width: 1%;flex-grow: 1;">￥{{ item.price }}</text>
				<text style="width: 1%;flex-grow: 1;">第{{ index+1 }}次投标</text>
			</view>
		</view>
		<bid-modal ref="bidModal"></bid-modal>
		<pys-button
			v-if="info && info.is_bid === 1"
			mode="fixed"
			:border-radius="0"
			:prevent-click="true"
			:prevent-time="500"
			size="36"
			@click="submit"
		>
			我要投标
		</pys-button>
		<pys-button
			v-else-if="info && info.is_bid === 0"
			mode="fixed"
			disabled
			size="36"
		>
			该商品不参与投标
		</pys-button>
		
	</view>
</template>

<script>
import MescrollMixin from '@/plugins/mescroll-uni/mescroll-mixins.js';
import swiperImage from '@/components/swiper-image/swiper-image.vue';
import bidModal from '@/components/bid-modal/bid-modal.vue';

export default {
	components: {
		swiperImage,
		bidModal
	},
	mixins: [MescrollMixin],
	data() {
		return {
			tabIndex: 1,
			id: null,
			info: {},
			images: []
		};
	},
	computed: {
		isLogin() {
			return this.$store.state.user.authorization;
		}
	},
	onLoad(options) {
		if (options.goods_id) {
			this.init({ goods_id: options.goods_id });
		} else if (options.goods_code) {
			this.init({ goods_code: options.goods_code });
		}
	},
	methods: {
		init(params) {
			this.$apis.goods.getInfo(params)
				.then(res => {
					console.log(res);
					this.id = res.goods_id;
					this.info = res;
					this.images = this.info.images;
				});
		},
		loadData(pageNo) {
			this.mescroll.endSuccess(1, false);
			// 模拟接口
			const params = {};
		},
		submit() {
			this.$refs.bidModal.open(this.info)
				.then(res => {
					console.log(res);
					return this.$apis.bid.storeBidGoods({
						goods_id: this.info.goods_id,
						price: res.price
					}, { isLoad: true });
				})
				.then(res => {
					uni.showModal({
						title: '投标成功',
						confirmText: '我知道了',
						showCancel: false
					})
					this.init({ goods_id: this.id });
				});
		}
	}
};
</script>

<style>

</style>
